import { useEffect, useState } from "react"
import {
  ClockCircleOutlined,
  HeartFilled
} from '@ant-design/icons';
// import { Outlet ,Link} from "react-router-dom"
import "./msjhomes.css"
import { getmsjhomes } from '../api/api';
import { useNavigate } from "react-router-dom";

function Home() { 
  let [msjlist,setmsjlist] = useState([]) 
  let [msjlist2,setmsjlist2]=useState([])
  let [msjlist3,setmsjlist3]=useState([])
  let navigate=useNavigate()
  useEffect(()=>{
    getmsjhomes().then(res=>{
      let data=res.data.map(v=>{
        v.imgs=JSON.parse(v.imgs)
        v.shijian=v.kqtime.split(":")[0]+":"+v.kqtime.split(":")[1]
        return v
      })
     setmsjlist(data.filter((v,i)=>i<=1)) 
     setmsjlist2(data.filter((v,i)=>i>3))
     setmsjlist3(data.filter((v,i)=>i>=2&&i<=3))
    })
  },[])
  return(
    <div className="msjhomes">
      <div className="msjhomes_top">彩生活</div> 
      <div className="msjhomes_con">
        {
          msjlist?.map(v=>{
            return (<div key={v.id} style={{"marginBottom":v.id==1?'10px':'0'}} className="msjlist_it">
              <img onClick={()=>{
                navigate(`/home/HomeDetail/${v.id}`)
              }} src={v.imgs[0]} style={{'width':'100%',"height":'150px'}} />
              <div className="msjlist_it_bot">
                <p>{v.name}</p>
                <p style={{"fontWeight":"600",'display':'flex','alignItems':'center'}}><ClockCircleOutlined style={{'margin':'0 5px'}} /> {v.shijian} 开抢</p>
              </div>
            </div>)
          })
        }

        <div style={{"display":'flex',"position":'relative'}} className="msjlist_it">
          {
            msjlist2?.map((v,i)=>{
              return <div key={v.id} className="msjlist_it2">
                <div style={{"background":i==0?'#FB9080':'#49BCFD'}} className="msjlist_it2_top">
                {i==1&&<p  className="msjlist_radio">男</p>} 
                <p>张妈妈私厨</p> 
                {i==0&&<p  className="msjlist_radio">女</p>}
                </div>
              </div>
            })
          }
          <div className="msjlist_heartfilled">
              <HeartFilled />
          </div>
        </div>
        <div style={{"display":'flex'}} className="msjlist_it">
          {
            msjlist2?.map((v,i)=>{
              return <div key={v.id} className="msjlist_it2">
                <img onClick={()=>{
                navigate(`/home/HomeDetail/${v.id}`)
              }} src={v.imgs[0]} style={{'width':'100%',"height":'100px'}} />
              </div>
            })
          }
        </div>

          {
            msjlist3?.map(v=>{
              return <div key={v.id} className="msjlist_it">
                <div className="msjlist_it_title">
                <div style={{'width':'80px'}}>
                  <div style={{'width':'80px',"border":'1px solid #333',"margin":'0 0 3px'}}>

                  </div>
                  <div style={{'width':'80px',"border":'1px solid #999'}}>

                  </div>
                </div>
                <p style={{'margin':'0 10px'}}>{v.name}</p>
                <div style={{'width':'80px'}}>
                <div style={{'width':'80px',"border":'1px solid #333',"margin":'0 0 3px'}}>

                  </div>
                  <div style={{'width':'80px',"border":'1px solid #999'}}>

                  </div>
                </div>
                </div>
                <img onClick={()=>{
                navigate(`/home/HomeDetail/${v.id}`)
              }} src={v.imgs[0]} style={{'width':'100%',"height":'150px'}} />
              </div>
            })
          }

      </div>
    </div>
  )
}
export default Home